{extend name="extend/base" /}

{block name="header"}{include file="public/header" title="Telegram_Ai_Bot | 用户界面-定时群发广告" annotation="header钩子"}{/block}

{block name="title"}定时群发广告{/block}
{block name="btn"}创建群发{/block}

{block name="config"}
    <select class="form-control-sm" id="example" style="width:160px;margin-right:10px;">
        <option value=""><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">实例选择...</font></font></option>
        {volist name="examples" id="ep"}
        <option value="{$ep.id}"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">{$ep.name}</font></font></option>
        {/volist}
    </select>
    
    <select class="form-control-sm" id="timing" style="width:140px;margin-right:10px;">
        <option value="1"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">每小时群发1次</font></font></option>
        <option value="2"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">每小时群发2次</font></font></option>
        <option value="3"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">每小时群发3次</font></font></option>
        <option value="4"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">每小时群发4次</font></font></option>
        <option value="5" selected><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">每小时群发5次</font></font></option>
    </select>
    
    <kk id="is_wt">
        <select id="type" class="form-control-sm" style="width:80px;margin-right:10px;">
            <option value="1"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">文字</font></font></option>
            <option value="2"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">图片</font></font></option>
        </select>
    </kk>

{/block}

{block name="btn"} <span class="badge badge-primary" onclick="get_config()"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">创建群发</font></font></span>{/block}

{block name="content"}
    <div id="wenzi" class="form-group">
        <label for="content"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">消息内容</font></font></label>
        <textarea class="form-control" id="content" rows="3" style="margin-top: 0px; margin-bottom: 0px; height: 50px;"></textarea>
     </div>
     <div id="tupian" style="display:none;" class="form-group">
        <form action="/index/Api/img_upload" class="dropzone" id="tupian_upload">
          <div class="dz-massage">
              拖拽或点击上传图片
          </div>
        </form>
     </div>

{/block}

{block name="tg_qun"}
    {volist name="tg_qun" id="vo" empty="暂无数据"}
    <label class="custom-control custom-checkbox custom-control-inline">
        {eq name="vo['is_verify']" value="0"}
        <input type="checkbox" name="qun" id="qun{$vo.id}" onclick="quxiao({$vo.id},{$vo.is_verify})" value="{$vo.id}" class="custom-control-input">
        <span class="custom-control-label" data-toggle="tooltip" data-placement="top" title="" data-original-title="{$vo.name_cn}">
            <font style="vertical-align: inherit;">
                <font style="vertical-align: inherit;" onclick="jump_qun('{$vo.url}')">
                    {$vo.name}
                </font>
            </font>
        </span>
        {else/}
        <input type="checkbox disabled" name="qun" id="qun{$vo.id}" onclick="quxiao({$vo.id},{$vo.is_verify})" value="{$vo.id}" class="custom-control-input">
        <span class="custom-control-label" data-toggle="tooltip" data-placement="top" title="" data-original-title="{$vo.name_cn}">
            <font style="vertical-align: inherit;">
                <font style="vertical-align: inherit;color:#CFCFCF;" onclick="jump_qun('{$vo.url}')">
                    {$vo.name}
                </font>
                <font class="text-danger" style="vertical-align: inherit;">需要验证</font>
            </font>
        </span>
        {/eq}
    </label>
    {/volist}
{/block}

{block name="group_type"}
    <a href="/timing_advertising_qun" class="badge  {$gtid == 0 ? 'badge-dark':'badge-light'}"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">全部</font></font></a>
    {volist name="group_type" id="gt"}
    <a href="/timing_advertising_qun?gt_id={$gt.id}" class="badge {$gt.id == $gtid ? 'badge-dark':'badge-light'}"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">{$gt.name}</font></font></a>
    {/volist}
{/block}

{block name="title2"}任务列表{/block}

{block name="add_group"}
    {volist name="timing_of_mass" id="tom" empty="$empty"}
    <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12">
        <div class="card">
            <div class="card-header d-flex">
                <h4 class="mb-0"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">实例名：{$tom.name}</font></font></h4>
                <div class="dropdown ml-auto">
                    <a class="toolbar" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="fas fa-ellipsis-v"></i>  </a>
                    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink" x-placement="bottom-end" style="position: absolute; transform: translate3d(18px, 23px, 0px); top: 0px; left: 0px; will-change: transform;">
                        <a class="dropdown-item" {eq name="tom['type']" value="0"}href="javascript:on_tom({$tom.aid});">{else/}href="javascript:off_tom({$tom.aid});">{/eq}<font style="vertical-align: inherit;"><font style="vertical-align: inherit;">{$tom.type==0?'启动':'关闭'}</font></font></a>
                        <a class="dropdown-item" href="javascript:ceshi_tom({$tom.aid});"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">测试</font></font></a>
                        <a class="dropdown-item" href="javascript:delete_tom({$tom.aid})"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">删除</font></font></a>
                    </div>
                </div>
            </div>
            <div class="card-body">
                {eq name="tom['type']" value="0"}
                <p class="card-text" id="tom_type{$tom.aid}">状态：<font class="text-danger" style="vertical-align: inherit;"><font style="vertical-align: inherit;">未启动</font></font></p>
                {else/}
                <p class="card-text">状态：<font class="text-success" style="vertical-align: inherit;"><font style="vertical-align: inherit;">已启动</font></font></p>
                {/eq}
                <p class="card-text">执行次数：{$tom.timing}次/小时</p>
                <p class="card-text">发送内容：{$tom.content | default="图片模式"}</p>
                <p class="card-text">发送图片：{$tom.image | default="消息模式"}</p>
                <p class="card-text">创建时间：{:date('Y-m-d H:i:s',$tom.atime)}</p>
                <hr>
                <div>
                    <div style="margin:-20px 0 0 -16px;height:20px;" class="" id="heading{$tom.aid}">
                        <h5 class="mb-0">
                           <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapse{$tom.aid}" aria-expanded="false" aria-controls="collapse1">
                             <span class="fas fa-angle-down mr-3 text-dark"></span><font style="vertical-align: inherit;"><font style="vertical-align: inherit;" class="text-dark">发送群组
                           </font></font></button>
                          </h5>
                    </div>
                    <div id="collapse{$tom.aid}" class="collapse" aria-labelledby="heading{$tom.aid}" data-parent="#accordion3" style="">
                        <div class="card-body">
                            {volist name="tom['datas']" id="toms" empty="数据为空"}
                            <span class="badge badge-primary"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> {$toms.name}</font></font></span>
                            {/volist}
                        </div>
                    </div>
                </div>
                <hr>
           
            </div>
        </div>
    </div>   
    {/volist}                            
{/block}  


{block name="footer"}{include file="public/footer"  annotation="footer钩子"}{/block}

{block name="js"}
<script>
        let data = [];//选择群列表ID
        let typeId = 1;
        
        //提交
        function get_config(){
            //zhi
            //console.log(imgData.length);
            var qun = $('input[name="qun"]');
            var thisLength = qun.length;
            var timing = $('#timing').val();
            
            var str = [];
            for(var i = 0;i<thisLength;i++){
                if(qun[i].checked == true){
                    str[i] = qun[i].value;
                }
            }
            
            for(var strs in str){
                //console.log(str[strs]);
                if(data.indexOf(str[strs]) == -1){
                    data.push(str[strs]);
                }
            }
            //console.log(JSON.stringify(data));
            
            var example = $('#example').val();
            if(!example){
                msg('提示框','请选择实例！');
                return;
            }
            
            if(!timing){
                msg('提示框','请选择每小时群发次数');
                return;                
            }
            
            // if(typeId == 1){
            //     //文字
            //     var content = $('#content').val();
            //     if(!content){
            //         msg('提示框','请输入消息内容！');
            //         return;                      
            //     }
            // }else{
            //     //图片
            //     var content = $('#image').val();
            //     if(!content){
            //         msg('提示框','图片不存在！');
            //         return;                      
            //     }                
            // }
            
            var content = $('#content').val();
            
            
            if(!content && !imgData.length){
                msg('提示框','发送内容不存在！');
                return;
            }
            
            if(data.length == 0){
                msg('提示框','请选择要群发的群！');
                return;                
            }
            

            
            
            
            $.post('/index/Api/add_qunfa',{'example':example,'timing':timing,'typeId':typeId,'content':content,'image':JSON.stringify(imgData),'data':JSON.stringify(data)},function(res){
                if(res.code>0){
                    msg('提示框',res.msg);
                }else{
                    msg('提示框',res.msg);
                    setTimeout(function(){location.reload();},600);
                }
            },'json');
        }
        
        //全选
        function selectAll(){
            var isCheck = $('#quanxuan').is(':checked');
            //console.log(isCheck);
            if(!isCheck){
                data = [];
            }
            $('input[type="checkbox"]').each(function(){
                this.checked = isCheck;
            });
        }
        
        //取消选择框
        function quxiao(id){
            var isCheck = $('#qun' + id).is(':checked');
            if(!isCheck){
                data.forEach(function(item,index,arr){
                    if(item == id){
                        arr.splice(index,1);
                    }
                });
            }
        }
        
        function jump_qun(url){
            window.open(url);
        }
        
        //文字 图片切换
        $(() => {
			$('#is_wt select').change(() => {
			    var id = $('#is_wt select').val();
				if(id == 1){
				    $('#wenzi').css('display','');
				    $('#tupian').css('display','none');
				    typeId = 1;
				}else{
				    $('#wenzi').css('display','none');
				    $('#tupian').css('display','');
				    typeId = 2;
				}
			});
		});

        function addtupian(e) { 
            document.getElementById("image").click();
        }

</script>
<script>

    $('.collapse').on('shown.bs.collapse', function() {
        $(this).parent().find(".fa-angle-down").removeClass("fa-angle-down").addClass("fa-angle-up");
    }).on('hidden.bs.collapse', function() {
        $(this).parent().find(".fa-angle-up").removeClass("fa-angle-up").addClass("fa-angle-down");
    });

    $('.panel-heading a').click(function() {
        $('.panel-heading').removeClass('active');

        //If the panel was open and would be closed by this click, do not active it
        if (!$(this).closest('.panel').find('.panel-collapse').hasClass('in'))
            $(this).parents('.panel-heading').addClass('active');
    });

</script>
<script>

    //执行一次测试
    function ceshi_tom(id){
        $('#tom_type'+id).html('状态：<font class="text-primary" style="vertical-align: inherit;"><font style="vertical-align: inherit;" id="perform_type"><span class="dashboard-spinner spinner-xs"></span>发送测试一次...</font></font>');
        $.get('/index/Api/ceshi_tom',{'id':id},function(res){
            if(res.code>0){
                msg('提示框',res.msg);
            }else{
                msg('提示框',res.msg);
            }
        },'JSON');
        
        setTimeout(function(){$('#tom_type'+id).html('状态：<font class="text-danger" style="vertical-align: inherit;"><font style="vertical-align: inherit;">未启动</font></font>')},3000);
    }
    
    //启动任务 tom_on
    function on_tom(id){
        $.get('/index/Api/start_tom/id/'+id,function(res){
            if(res.code>0){
                msg('提示框',res.msg);
            }else{
                msg('提示框',res.msg);
                setTimeout(function(){location.reload();},600)
            }  
        },'json');
    }
    
    //关闭任务 off_tom
    function off_tom(id){
        $.get('/index/Api/off_tom/id/'+id,function(res){
            if(res.code>0){
                msg('提示框',res.msg);
            }else{
                msg('提示框',res.msg);
                setTimeout(function(){location.reload();},600)
            }  
        },'json'); 
    }
    
    //删除任务
    function delete_tom(id){
        $.get('/index/Api/delete_tom/id/'+id,function(res){
            if(res.code>0){
                msg('提示框',res.msg);
            }else{
                msg('提示框',res.msg);
                setTimeout(function(){location.reload();},600)
            }  
        },'json');
    }
    

</script>

<style>
    form{margin-top:30px;}

</style>
<script src="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/dropzone@5/dist/min/dropzone.min.css" type="text/css" />
<script>
let imgData = [];
var myDropzone = new Dropzone("#tupian_upload", { 
    paramName: "file", //  用于传输文件的名称 
    maxFilesize: 2, // MB
    init: function() {
        this.on("success", function(file,res) { 
            //console.log(res)
            res = JSON.parse(res)
            if(res.code>0){
                msg('提示框',res.msg);
            }else{
               msg('提示框',res.msg);
               imgData.push(res.data);
               //console.log(imgData)
            }
        });
    }
});


</script>
{/block}